<template>
    <view class="repair-record-container">
      <!-- 蓝色头部背景区域：标题居上 -->
      <view class="header blue-bg">
        <text class="title">维修记录</text>
      </view>
      
      <!-- 内容区域：白色框嵌套在蓝色背景上，灰色背景为页面整体底色 -->
      <view class="content">
        <view class="white-box">
          <!-- 维修信息区域 -->
          <view class="section">
            <text class="section-title">维修信息</text>
            
            <view class="info-item">
              <text class="info-label">维修单号：</text>
              <text class="info-value">3535252</text>
            </view>
            
            <view class="info-item">
              <text class="info-label">车主姓名：</text>
              <text class="info-value">张</text>
            </view>
            
            <view class="info-item with-icon">
              <text class="info-label">联系方式：</text>
              <text class="info-value">1993829282</text>
              <image class="info-icon" src="/static/phonee.png" mode="widthFix" alt="电话图标" />
            </view>
            
            <view class="info-item">
              <text class="info-label">维修方式：</text>
              <text class="info-value">上门取车 / 到店维修</text>
            </view>
            
            <view class="info-item with-icon">
              <text class="info-label">取车位置：</text>
              <text class="info-value">山阳区32号</text>
              <image class="info-icon" src="/static/plane.png" mode="widthFix" alt="位置图标" />
            </view>
            
            <view class="info-item">
              <text class="info-label">预约日期：</text>
              <text class="info-value">2022/11/10 11:00</text>
            </view>
            
            <view class="info-item">
              <text class="info-label">提交日期：</text>
              <text class="info-value">2022/11/08 12:34</text>
            </view>
          </view>
  
          <!-- 车辆信息区域 -->
          <view class="section">
            <text class="section-title">车辆信息</text>
            
            <view class="info-item">
              <text class="info-label">车辆类型：</text>
              <text class="info-value">大客车</text>
            </view>
            
            <view class="info-item">
              <text class="info-label">车牌号：</text>
              <text class="info-value">豫J45323</text>
            </view>
            
            <!-- 整车照片区域：文字在上，图片在下 -->
            <view class="photo-group">
              <text class="photo-label">整车照片：</text>
              <view class="whole-car-imgs">
                <image class="whole-car-img" src="/static/weixuicar.png" mode="aspectFit" alt="整车照片" />
              </view>
            </view>
            
            <!-- 维修部位照片区域：文字在上，图片在下 -->
            <view class="photo-group">
              <text class="photo-label">维修部位照片：</text>
              <view class="repair-imgs">
                <image class="repair-img" src="/static/weixuicar.png" mode="aspectFit" alt="维修部位照片1" />
                <image class="repair-img" src="/static/weixuicar.png" mode="aspectFit" alt="维修部位照片2" />
                <image class="repair-img" src="/static/weixuicar.png" mode="aspectFit" alt="维修部位照片3" />
              </view>
            </view>
          </view>
          
          <!-- 确认到场按钮 -->
          <view class="confirm-area">
            <button 
              class="confirm-btn" 
              :class="{ 'confirmed-btn': isConfirmed }" 
              @click="handleConfirm"
              :disabled="isConfirmed"
            >
              {{ isConfirmed ? '已到场' : '确认到场' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isConfirmed: false
      }
    },
    methods: {
      handleConfirm() {
        this.isConfirmed = true;
        console.log('用户确认到场');
        // 实际应用中可调用接口提交确认信息
      }
    }
  }
  </script>
  
  <style scoped>
  .repair-record-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
  }
  
  .header {
    background-color: #2563eb;
    height: calc(100vh / 3); 
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    padding-top: 40rpx; 
    padding-bottom: 20rpx; 
  }
  
  .title {
    font-size: 36rpx;
    color: #ffffff;
    font-weight: 600;
  }
  
  
  .content {
    flex: 1; 
    padding: 0 24rpx; 
    display: flex;
    justify-content: center;
    align-items: flex-start; 
  }
  
  
  .white-box {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 650rpx; 
    margin-top: -400rpx; 
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 20rpx; 
    color: #1f2937;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #e5e7eb;
  }

  .info-item {
    margin-top: 16rpx; 
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
  }
  
  .info-item.with-icon {
    justify-content: space-between; 
  }
  
  .info-label {
    font-size: 26rpx;
    color: #6b7280;
    min-width: 160rpx;
  }
  
  .info-value {
    font-size: 26rpx;
    color: #374151;
    flex: 1;
  }
  
  
  .info-icon {
    width: 40rpx;
    height: 40rpx;
  }
  

  .photo-group {
    margin-top: 24rpx;
    margin-bottom: 24rpx;
  }
  
  
  .photo-label {
    font-size: 26rpx;
    color: #6b7280;
    display: block;
    margin-bottom: 16rpx;
  }
  
  
  .whole-car-imgs {
    display: flex;
    flex-wrap: wrap;
  }
  
  .whole-car-img {
    width: 140rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border: 1rpx solid #e5e7eb;
  }
  
  
  .repair-imgs {
    display: flex;
    flex-wrap: wrap;
  }
  
  .repair-img {
    width: 140rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border: 1rpx solid #e5e7eb;
  }
  
  
  .confirm-btn {
    width: 300rpx;
    height: 80rpx;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 40rpx;
    line-height: 80rpx;
    text-align: center;
    border: none;
    margin: 20rpx auto 0;
  }
  
  
  .confirmed-btn {
    background-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
  }
  </style>